<script setup lang="tsx">
import type { FormSchema } from '@/components/Form';
import { Form } from '@/components/Form';
import Icon from '@/components/Icon/src/Icon.vue';
import { useForm } from '@/hooks/useForm';
import { useI18n } from '@/hooks/useI18n';
import { useValidator } from '@/hooks/useValidator';
import { ElButton, ElCheckbox, ElLink } from 'element-plus';
import { reactive, ref, watch } from 'vue';
import { useRouter, type RouteLocationNormalizedLoaded } from 'vue-router';

const emit = defineEmits(['to-register']);

const { currentRoute, addRoute, push } = useRouter();
const { t } = useI18n();
const { formRegister, formMethods } = useForm();
const { getFormData } = formMethods;

const redirect = ref<string>('');
watch(
  () => currentRoute.value,
  (route: RouteLocationNormalizedLoaded) => {
    redirect.value = (route.query.redirect as string) || '/';
  },
  { immediate: true }
);

const schema = reactive<FormSchema[]>([
  {
    field: 'title',
    colProps: {
      span: 24
    },
    formItemProps: {
      slots: {
        default: () => {
          return <h2 class="text-2xl font-bold text-center">{t('login.login')}</h2>;
        }
      }
    }
  },
  {
    field: 'username',
    label: t('login.username'),
    component: 'Input',
    colProps: {
      span: 24
    },
    componentProps: {
      placeholder: t('login.usernamePlaceholder')
    }
  },
  {
    field: 'password',
    label: t('login.password'),
    component: 'InputPassword',
    colProps: {
      span: 24
    },
    componentProps: {
      style: {
        width: '100%'
      },
      placeholder: t('login.passwordPlaceholder'),
      onKeydown: (evt: KeyboardEvent) => {
        if (evt.key === 'Enter') {
          evt.stopPropagation();
          handleLogin();
        }
      }
    }
  },
  {
    field: 'tool',
    colProps: {
      span: 24
    },
    formItemProps: {
      slots: {
        default: () => {
          return (
            <>
              <div class={'flex justify-between items-center w-full'}>
                <ElCheckbox v-model={remember.value} label={t('login.rememberPassword')} size="small" />
                <ElLink type="primary" underline={false}>
                  {t('login.forgotPassword')}
                </ElLink>
              </div>
            </>
          );
        }
      }
    }
  },
  {
    field: 'login',
    colProps: {
      span: 24
    },
    formItemProps: {
      slots: {
        default: () => {
          return (
            <>
              <div class={'w-full'}>
                <ElButton type="primary" class="w-full" onClick={handleLogin}>
                  {t('login.login')}
                </ElButton>
              </div>
              <div class={'w-full mt-10px'}>
                <ElButton class="w-full" onClick={handleRegister}>
                  {t('login.register')}
                </ElButton>
              </div>
            </>
          );
        }
      }
    }
  },
  {
    field: 'other',
    component: 'Divider',
    label: t('login.otherLogin'),
    componentProps: {
      contentPosition: 'center'
    }
  },
  {
    field: 'otherLogin',
    colProps: {
      span: 24
    },
    formItemProps: {
      slots: {
        default: () => {
          return (
            <>
              <div class={'flex justify-between items-center w-full'}>
                <Icon icon="vi-ant-design:github-filled" class="cursor-pointer ant-icon" size={30} />
                <Icon icon="vi-ant-design:wechat-filled" class="cursor-pointer ant-icon" size={30} />
                <Icon icon="vi-ant-design:alipay-circle-filled" class="cursor-pointer ant-icon" size={30} />
                <Icon icon="vi-ant-design:weibo-circle-filled" class="cursor-pointer ant-icon" size={30} />
              </div>
            </>
          );
        }
      }
    }
  }
]);
const { required } = useValidator();
const rules = {
  username: [required()],
  password: [required()]
};
const remember = ref<boolean>(false);
const handleLogin = async () => {
  // push({ path: redirect.value || '/' });

  const formData = await getFormData();
  console.log('handleLogin', formData);
};

const handleRegister = () => {
  // 触发注册事件
  emit('to-register');
};
</script>
<template>
  <!-- <button @click="handleLogin">{{ t('common.login') }}</button> -->
  <Form
    :schema="schema"
    :rules="rules"
    label-position="top"
    hide-required-asterisk
    class="dark:(border-[var(--el-border-color)] border-1 border-solid)"
    @register="formRegister"
  />
</template>
